<template>
	<view class="prefer-content">

		<view class="prefer-title">
			为你优选
		</view>
		<view>
			<scroll-view class="scroll" scroll-x="true" scroll-with-animation="true">
				<view class="content-item" v-for="(item,i) in getPreferList" :key='i'>
					<view>
						<image class="content-img" :src="item.image" mode="aspectFill"></image>
						<view class="content-title">
							{{item.title}}
						</view>
						<view class="content-lable">
							{{item.lable}}
						</view>


					</view>

				</view>



			</scroll-view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			getPreferList: {
				type: Array,
				default: []
			},
		},
		data() {
			return {

			}
		},
		mounted() {

		}
	}
</script>

<style scoped lang="scss">
	.prefer-content {
		margin: 30upx 0;

		.prefer-title {
			font-size: 35upx;
			height: 50upx;
			line-height: 50upx;
			margin-bottom: 20upx;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}

		.scroll {
			//加上才能出现横向滚动效果 
			white-space: nowrap;
			width: 100%;
			height: 300upx;
overflow: hidden;

			.content-item {
				display: inline-block;
				height: 300upx;
				width: 300upx;
				// background: red;
				margin: 0 8upx;

				.content-img {
					width: 300upx;
					height: 200upx;
					border-radius: 8upx;
				}
				.content-title{
					font-size: 30upx;
				}
				.content-lable{
					font-size: 27upx;
					color: #9c9c9c
				}
			}
		}

		


	}
</style>
